<template>
  <body>
    <!------------- Head ------------------------------------------>
    <div class="home">
      <div class="header banner">
        <h1 class="titles">珞珈<span class="titles">音乐</span></h1>
        <p class="text">开启你的音乐之旅</p>
      </div>
    </div>
    <!------------- Head ---------------------------------------->

    <!--template section-->
    <div class="top-content">
      <div class="center-content">
        <div class="row">
          <h1 class="quote">
            "Music expresses that which cannot be put into words and that which
            cannot remain silent."
          </h1>
          <p class="text">Victor Hugo</p>
        </div>
      </div>
    </div>

    <!--creative section-->

    <section>
      <div class="center-content">
        <div class="row">
          <div class="creative column column-1-3">
            <img
              src="../assets/images/3.jpg"
              alt="Portfolio Item"
              draggable="false"
            />
            <h2 class="arrow">音乐</h2>
            <p class="text">
              我们拥有广泛的音乐库，涵盖流行、古典、摇滚、电子等多种音乐类型。用户可以搜索、播放、创建歌单，根据个人喜好收藏和分享音乐作品。智能推荐算法还能根据用户的音乐偏好，为其提供个性化的音乐推荐。
            </p>
          </div>

          <div class="creative column column-1-3">
            <img
              src="../assets/images/1.jpg"
              alt="Portfolio Item"
              draggable="false"
            />
            <h2 class="arrow">共享</h2>
            <p class="text">
              上传自己的音乐作品，让更多人欣赏和支持自己的创作。同时，用户还可以创建歌单，并与其他用户分享，共同发现和推荐优秀的音乐。共享功能加强了用户之间的互动和交流，让音乐成为连接人们的桥梁。
            </p>
          </div>

          <div class="creative column column-1-3 last-child">
            <img
              class="dog"
              src="../assets/images/2.jpg"
              alt="Portfolio Item"
              draggable="false"
            />
            <h2 class="arrow">博客</h2>
            <p class="text">
              互动、评论他人的文章，建立音乐交流社区。无论您是音乐爱好者、创作者还是音乐教育者，博客功能都能让您表达自己的观点、分享经验，并与其他音乐爱好者进行深入交流。
            </p>
          </div>
        </div>
      </div>
    </section>

    <!--------second-background section-------------->
    <div class="flower banner">
      <div>
        <h1 class="yiqi">一起走进音乐殿堂</h1>
        <span>从现在开始</span>
      </div>
    </div>

    <!--------second-background section------------->
    <div class="top-content">
      <div class="center-content">
        <div class="row">
          <h1 class="arrow">与他们一起，在音乐的世界里畅游</h1>
        </div>
        <play-list
          class="play-list-container"
          path="singer-detail"
          :playList="singerList"
        ></play-list>
      </div>
    </div>

    <!----------------------third-background section---------------------------------------------------->

    <div class="black">
      <a class="second-button" href="header">加入我们</a>
    </div>

    <!----------------------third-background section-------------------------------------->

    <!--people section-->
    <section>
      <div class="center-content">
        <div class="row">
          <h1 class="arrow team">我们的团队</h1>

          <div class="column wapper">
            <div class="column column-1-3">
              <div class="people card">
                <img
                  src="../assets/images/zx.jpg"
                  class="my-avator"
                  alt="Team Member"
                  draggable="false"
                />
                <h2 class="arrow">庄新杰</h2>
              </div>
            </div>

            <div class="column column-1-3">
              <div class="people card">
                <img
                  class="my-avator"
                  src="../assets/images/zxp.jpg"
                  alt="Team Member"
                  draggable="false"
                />
                <h2 class="arrow">张需鹏</h2>
              </div>
            </div>

            <div class="column column-1-3 last-child">
              <div class="people card">
                <img
                  class="my-avator"
                  src="../assets/images/wg.jpg"
                  alt="Team Member"
                  draggable="false"
                />
                <h2 class="arrow">王冠儒</h2>
              </div>
            </div>
            <div class="column">
              <div class="people card">
                <img
                  class="my-avator"
                  src="../assets/images/zc.jpg"
                  alt="Team Member"
                  draggable="false"
                />
                <h2 class="arrow">张弛东方</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!----------------------forth-background section---------------------------------------------------->
    <div class="cup">
      <h1 class="arrow">联系我们</h1>
      <form class="searching">
        <input type="text" name="" value="" placeholder="" />
        <input type="submit" name="" value="Send" />
      </form>
    </div>
    <!----------------------forth-background section---------------------------------------------------->

    <!--contact section-->

    <div class="contact">
      <section>
        <div class="center-content">
          <div class="row">
            <!--         <a href="#top" class="up-btn"><i class="fa fa-chevron-up"></i></a> -->
            <div class="column center-text container">
              <h3 class="arrow">联系方式</h3>
            </div>

            <div class="column column-1-3">
              <div class="box">
                <i class="fa fa-map-marker"></i>
                <span>Address</span>
                <p class="text">Level 6, 23 Pitt St, Sydney</p>
              </div>
            </div>

            <div class="column column-1-3">
              <div class="box">
                <i class="fa fa-mobile"></i>
                <span>PHONE</span>
                <p class="text">+61 9 211 3747</p>
              </div>
            </div>

            <div class="column column-1-3 last-child">
              <div class="box">
                <i class="fa fa-paper-plane"></i>
                <span>EMAIL</span>
                <p class="text">hey@halcyondays.com</p>
              </div>
            </div>

            <div class="column last-buttons">
              <div class="buttons">
                <i class="fa fa-dribbble"></i>
                <i class="fa fa-twitter"></i>
                <i class="fa fa-envelope"></i>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!----------------------fotter---------------------------------------------------->
    <footer>
      <div class="center-content">
        <div class="row">
          <div class="column column-1-2">
            <ul>
              <li><a class="grey" href="#">Terms & Conditions</a></li>
              <li><a class="grey" href="#">Legals</a></li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
  </body>
  <div class="bar"></div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ref, onMounted } from "vue";
import PlayList from "@/components/PlayList.vue";
import { swiperList, NavName } from "@/enums";
import { HttpManager } from "@/api";
import mixin from "@/mixins/mixin";
import $ from "jquery";

export default defineComponent({
  components: {
    PlayList,
  },
  setup() {
    const songList = ref([]); // 歌单列表
    const singerList = ref([]); // 歌手列表
    const { changeIndex } = mixin();
    onMounted(() => {
      try {
        HttpManager.getSongList().then((res) => {
          songList.value = (res as ResponseBody).data.sort().slice(0, 10);
        });

        HttpManager.getAllSinger().then((res) => {
          singerList.value = (res as ResponseBody).data.sort().slice(0, 10);
        });

        onMounted(() => {
          changeIndex(NavName.Home);
        });
      } catch (error) {
        console.error(error);
      }
    });
    return { singerList };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/css/var.scss";
@import "@/assets/css/home.scss";
@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");

/*轮播图*/
.swiper-container {
  width: 90%;
  margin: auto;
  padding-top: 20px;
  img {
    width: 100%;
  }
}

.swiper-container:deep(.el-carousel__indicators.el-carousel__indicators--outside) {
  display: inline-block;
  transform: translateX(30vw);
}

.el-slider__runway {
  background-color: $color-blue;
}
.bar {
  padding-bottom: 50px;
}

.titles,
.header {
  font-family: "Ma Shan Zheng", cursive;
  font-size: 100px !important;
}
.quote {
  font-family: "Caveat", cursive;
  font-size: 45px;
}

.yiqi {
  margin-bottom: 20px;
}
.my-avator {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.team {
  font-size: 30px;
  transform: translateX(-20px);
}
</style>
